@import "../../../assets/css/tailwind.css";
.div-svg-loading {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* display: none; */
}

.bounce-container {
  width: 100px;
  height: 34px;
}

.bounce-point {
  animation: point-bounce 1s linear infinite;
  fill: rgb(99 102 241);
}

@keyframes point-bounce {
  0% {
    fill: rgb(99 102 241);
    transform: translateY(8px);
  }

  25% {
    fill: rgb(99 102 241);
    transform: translateY(12px);
  }

  50% {
    fill: rgb(99 102 241);
    transform: translateY(16px);
  }

  75% {
    fill: rgba(99, 102, 241, 0.5);
    transform: translateY(12px);
  }

  100% {
    fill: transparent;
    transform: translateY(8px);
  }
}

/* 交错延迟 */
.bounce-point:nth-child(1) {
  animation-delay: 0.3s;
}

.bounce-point:nth-child(2) {
  animation-delay: 0.1s;
}

.bounce-point:nth-child(3) {
  animation-delay: -0.1s;
}

.bounce-point:nth-child(4) {
  animation-delay: -0.3s;
}
